import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { StyleSheet, View } from 'react-native'; 
import { List, ListItem, Text } from 'react-native-elements';

const styles = StyleSheet.create({
  list: {
    marginTop: 0
  },
  header: {
    padding: 8
  }
});

const OrderPayment = ({chinese, onUpdatePayment, payment: {status, modeIcon, displayMode, description, canUpdate}}) => {
  let color;
  switch (status) {
    case 'Paid':
    case 'success':
      color = 'green';
      break;
    case 'Pending':
    case 'pending':
      color = '#F9A825';
      break;
    case 'Failed':
    case 'failed':
    case 'cancelled':
      color = 'red';
      break;
    default:
  }

  return (
    <View>
      <Text style={styles.header}>{chinese?'支付':'Payment'}</Text>
      <List containerStyle={styles.list}>
        <ListItem title={displayMode} rightTitleStyle={{color}} rightTitle={color?status:null}
          hideChevron={canUpdate?false:true} onPress={canUpdate?onUpdatePayment:null}/>
      </List>
    </View>
  );
}

OrderPayment.fragments = {
  payment: gql`
    fragment OrderPayment on OrderPayment {
      status
      modeIcon
      displayMode
      paymentMethod
      description
      requireManualPayment
      canUpdate
    }
  `
};

OrderPayment.propTypes = {
  payment: propType(OrderPayment.fragments.payment).isRequired
};

export default OrderPayment;
